<style  scoped>
.ul {
    list-style-type: none;
    padding: 5px;
    min-height: 300px;
    max-height: 400px;
    overflow-y: scroll;
}
.ul li {
    /* margin-left: 20px; */
    font-size: 12px;
    line-height: 2.5em;
    background-color:#fdfdfd;
    border-bottom: 0.5px solid gainsboro;
    vertical-align: middle;
}
.ul li:hover {
  background-color:#f0faff;;
}
.ul li .btn {
  /* float: right; */
  margin-bottom: 5px; 
}
.table-header {
    margin: 5px;
    text-align: right;
    height: 22px;
}
</style>

<template>
<Row class="layout-content-body">
    <Card>
      <p slot="title">{{title}}</p>
      <Row guter="15">
        <Col span="8" v-show="addFlag">
          <Card :dis-hover="true" :title="left_title">
            <Select v-model="currentRoldId">
              <Option v-for="item in roles" :label="item.Name" :key="item.Id" :value="item.Id"></Option>
            </Select>
            <div>
              <ul class="ul">
                <li v-for="(user, idx) in users" :key="user.Id">{{idx+1}}.&nbsp;{{user.Abbr}}
                  <Button @click="addHandler(user)" class="btn" type="text"   shape="circle"  icon="md-add-circle" ></Button>
                </li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span="16">
          <Card :dis-hover="true" title="专家组成员">
              <div class="table-header">
                <ButtonGroup> 
                    <Button  type="primary" @click="setLeader">设为组长</Button>
                    <Button  type="primary" @click="saveProfessorGroup">保存</Button>
                </ButtonGroup>
              </div>
              <Table :columns="columns" :data="dataAll"  :hover-show="true" height="292" highlight-row @on-row-click="rowClick">
              </Table>
            </Card>
        </Col>
      </Row>
    </Card>
</Row>
</template>
<script>
import moment from 'moment';
export default {
  name: 'SetProfessorGroup',
  computed: {
    group () {
      return this.$route.params.group;
    },
    title () {
      let str = this.group.Name;
      return `${str}——专家组成员设置`;
    }
  },
  data () {
    return {
      left_title: '用户类型',
      addFlag: true,
      users: [],
      dataAll: [],
      columns: [
        // {
        //   type: 'selection'
        // },
        {
          type: 'index',
          title: '#'
        },
        {
          title: '专家',
          key: 'Abbr'
        }, 
        {
          title: '操作',
          render: (h, { row, index }) => {
            return h('Button', {
              props: {
                size: 'small',
                type: 'primary'
              },
              on: {
                click: () => {
                  this.$delete(this.dataAll, index);
                }
              }
            }, '删除');
          }
        }
      ],
      roles: [],
      currentRole: {},
      currentRoldId: '',
      currentRow: {}
    };
  },
  methods: {
    addHandler (item) {
      for (let k = 0; k < this.dataAll.length; k++) {
        if (this.dataAll[k]['Id'] === item['Id']) {
          this.$Message.info('该用户已在专家组中，无需重复添加');
          return;
        }
      }
      this.dataAll.push(item);
    },
    getRoles () {
      this.$api.QueryRolesExclusiveSystem().then((res) => {
        // console.log(' --', res.Data);
        if (Array.isArray(res.Data)) {
          this.roles = res.Data;
          this.currentRole = this.roles[this.roles.length - 1];
          this.currentRoldId = this.roles[this.roles.length - 1]['Id'];
          // this.QueryUsers();
        } else {
          this.roles.length = 0;
        }
      }, (err) => {
        // console.error(err);
        
        if (err) {
          this.$Message.error(err, 4);
        }
      });
    },
    QueryUsers () {
      this.$api.QueryUsersByOrgAndRole(this.currentRole).then((res) => {
        if (Array.isArray(res.Data)) {
          // console.log('true');
          this.users = res.Data;
        } else {
          // console.log('false');
          this.users = [];
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
        }
      });
    },
    QueryUserByImsProfessorGroup () {
      this.$api.QueryUserByImsProfessorGroup(this.group).then((res) => {
        if (Array.isArray(res.Data)) {
          this.dataAll = res.Data;
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    saveProfessorGroup () {
      let UserArray = [];
      for (let k = 0; k < this.dataAll.length; k++) {
        if (this.dataAll[k].Id) {
          UserArray.push(this.dataAll[k].Id);
        }
      }
      let ProfessorGroupId = this.group.Id;
      let params = { UserArray, ProfessorGroupId };
      this.$api.UpdateProfessorGroupMember(params).then((res) => {
        this.$Message.success('操作成功！');
        this.QueryUserByImsProfessorGroup();
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
        }
      });
      // console.log(UserArray);
    },
    setLeader () {
      // this.$api.SetLeader()
      if (this.currentRow.Id && this.group.Id) {
        let params = {
          UserArray: [this.currentRow.Id],
          ProfessorGroupId: this.group.Id
        };
        console.log(params);
        this.$api.SetLeader(params).then((res) => {
          this.$Message.success('操作成功！');
        }).catch((err) => {
          if (err) {
            this.$Message.error(err, 4);
          }
        });
      } else {
        this.$Message.warning('请选择一个用户！');
        // this.$router.push({ name: '专家组' });
      }
    },
    rowClick (row, index) {
      // console.log(row);
      // console.log(index);
      // let  
      this.currentRow = row;
    }
  },
  watch: {
    'roles': function (newVal, oldVal) {
      if (Array.isArray(newVal) && newVal.length > 0) {
        this.currentRole = newVal[newVal.length - 1];
        this.currentRoldId = newVal[newVal.length - 1]['Id'];
        // this.QueryUsers();
      }
    },
    'currentRoldId': function (newVal, oldVaL) {
      let roles = this.roles;
      for (let k = 0; k < roles.length; k++) {
        if (roles[k]['Id'] === newVal) {
          this.currentRole = roles[k];
          // this.currentRoldId = roles[k]['id'];
          this.QueryUsers();
          break;
        }
      }
    }
  },
  mounted () {
    if (!this.group) {
      this.$router.push({ name: '专家组' });
    }
    this.getRoles();
    this.QueryUserByImsProfessorGroup();
  }
};
</script>
